<template>
  <div class="main">
    <action-bar :options="navOptions"></action-bar>

    <view class="main-box">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="item-name">
          <span class="name">{{ item.staffName }}</span>
          <!-- <span class="time">评价时间: 2025-08-03</span> -->
        </view>
        <view class="item-content">
          <view class="item-content-box">
            <span>{{ item.totalScore }}分</span>
            <span>评价总分</span>
          </view>
          <view class="item-content-box">
            <span>{{ item.totalLevel }}</span>
            <span>评价等级</span>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 100rpx;"></view>
    <view class="btnBox">
      <view class="btn" @click="navTo">新增</view>
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navOptions: {
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "执业评价列表",
        },
      },

      list: [],
    };
  },
  onLoad() {
    this.getList()
  },
  methods: {
    getList() {
      let info = uni.getStorageSync('app_userInfo')
      let data = {
        pageNo: 1,
        pageSize: 100,
        unitUserId: info.userId
      }
      this.$store.dispatch("getInstEvaluationsList", data).then(({ code, data: { records }, msg }) => {
        if (code == 200) {
          this.list = records
        }
      });
    },
    navTo() {
      uni.navigateTo({
        url: "/pages_workTableChild/evaluate/staffInfo",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  &-box {
    width: 100%;
    min-height: calc(100vh - 180rpx);
    background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;

    .item {
      width: calc(100% - 40rpx);
      background-color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #e5e5e5;
      margin: 0 auto 24rpx;
      border-radius: 20rpx;

      &-name {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .name {
          font-size: 30rpx;
          font-weight: 600;
        }

        .time {
          font-size: 24rpx;
          color: #6b6b6b;
        }
      }

      &-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        &-box {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border: 1rpx solid #f3f3f3;
          border-radius: 20rpx;
          margin: 20rpx 20rpx 10rpx 20rpx;
          padding: 20rpx;
          box-shadow: 5rpx 5rpx 10rpx #f5f5f5;

          span:first-child {
            font-size: 30rpx;
            font-weight: 700;
            color: #4d90fe
          }

          span:last-child {
            font-size: 24rpx;
            margin-top: 10rpx
          }
        }
      }

    }
  }

  .btnBox {
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    border-top: 1rpx solid #f3f3f3;
    align-items: center;
    box-shadow: 0 -5rpx 10rpx #f5f5f5;

    .btn {
      width: calc(100% - 40rpx);
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      border-radius: 45rpx;
      background-color: $OVERALL_SITUATION_BACKGROUND;
    }
  }
}
</style>
